<template>
  <view class="square">
    <div v-if="list.length" class="list">
      <div class="item" v-for="(item, i) in list" :key="i">
        <div
          class="goods"
          @click="
            $utils.toUrl('/goods/goods/goods?is_pt=true&id=' + item.goods_id)
          "
        >
          <image :src="item.pic" mode="aspectFill"></image>
          <div class="goods-content">
            <div class="u-line-2 u-m-b-10 font-w-600">
              {{ item.goods_name }}
            </div>
            <div class="u-flex u-m-b-20">
              <div class="user-date">
                <image :src="item.avatar"></image>
                <text>正在拼团</text>
                <u-count-down
                  class="u-m-l-10"
                  :timestamp="item.end_time"
                  font-size="20"
                  separator-size="20"
                  color="#F0250E"
                  separator-color="#F0250E"
                  bg-color="transparent"
                ></u-count-down>
              </div>
            </div>

            <div class="price-bt">
              <div class="pt-price">
                <text style="font-w-600 ">
                  ￥
                  <text class="u-font-36">
                    {{ item.pt_price | priceBeforeZero }}
                  </text>
                  {{ item.pt_price | priceAfterZero }}
                </text>
                <text class="u-m-l-4">拼团价</text>
              </div>
              <div class="pt-bt">
                <div>拼团中</div>
                <div class="u-font-24">参与拼团</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="u-p-b-24">
        <u-loadmore status="loadmoreStatus"></u-loadmore>
      </div>
    </div>

    <div v-else>
      <u-empty mode="data"></u-empty>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loadmoreStatus: "loadmore",
      list: [],
      current: 0,
      page: {
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  onLoad() {
    this.getList();
  },

  methods: {
    async getList(reset, fn) {
      if (reset) {
        let { list, page, loadmoreStatus } = this.$options.data();
        this.list = list;
        this.page = page;
        this.loadmoreStatus = loadmoreStatus;
      }
      if (this.loadmoreStatus == "nomore") return;
      const res = await this.$allrequest.pt.getPtSquare({
        ...this.page
      });
      this.page.pageNo++;
      this.list.push(...res.data.list);
      this.loadmoreStatus =
        this.list.length >= res.data.totalCount ? "nomore" : "loadmore";
      fn && fn();
    },
    tabsChange(e) {
      this.current = e;
    }
  },
  onPullDownRefresh() {
    this.getList(true, () => {
      uni.stopPullDownRefresh();
    });
  },
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    }
  }
};
</script>

<style lang="scss" scoped>
.square {
  padding: 24rpx;
  min-height: 100vh;
  background: #f2f2f2;
  padding-bottom: env(safe-area-inset-bottom);

  .goods {
    background: #fff;
    display: flex;
    padding: 32rpx 24rpx;
    margin-bottom: 24rpx;
    border-radius: 20rpx;
    > image {
      width: 220rpx;
      height: 220rpx;
      border-radius: 10rpx;
    }

    .goods-content {
      flex: 1;
      width: 0;
      margin-left: 20rpx;
      .user-date {
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        background: #fee5e5;
        padding-right: 14rpx;
        font-size: 22rpx;
        color: #f0250e;

        > image {
          margin-right: 4rpx;
          height: 32rpx;
          width: 32rpx;
          border-radius: 50%;
        }
      }

      .price-bt {
        display: flex;
        align-items: flex-end;
        .pt-price {
          flex: 1;
          width: 0;
          color: #f0250e;
          font-size: 24rpx;
        }
        .pt-bt {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 160rpx;
          height: 78rpx;
          background: linear-gradient(180deg, #f22407 0%, #f84d17 100%);
          box-shadow: 0rpx 6rpx 12rpx rgba(240, 37, 14, 0.2);
          border-radius: 20rpx;
          font-size: 18rpx;
          color: #fff;
        }
      }
    }
  }
}
</style>
